<template>
    <el-container>
      <el-header style="border: 0px solid red;padding: 0">
        首行
        <!-- <lh></lh> -->
      </el-header>
      <el-container >
        <el-aside :width="asideWidth" style="height: calc(100vh - 65px);border-right: 1px solid #e6e6e6;">
          侧边栏
          <!-- <layout-aside></layout-aside> -->
        </el-aside>
        <el-container style="border: 0px solid green">
          <el-main style="height: 100%">
            <transition name="main" mode="out-in">
              <router-view ></router-view>
            </transition>
          </el-main>
          <el-footer class="main-footer" >
            <!-- <Bottom></Bottom> -->页脚
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
</template>

<script>
  export default {
    name: 'layout',
    components: {
      lh,
      Bottom,
      layoutAside
    },
    computed:{
      asideWidth(){
          return '200px'
      }
    }
  }
</script>

<style lang="scss">
  body{
    margin: 0;
  }
  .main-footer {
    height:50px;line-height:50px;
    transition: transform 0.3s ease-in-out, margin 0.3s ease-in-out;
    text-align: center;
    padding: 5px 15px;
    color: #444;
    width: 100%;
    a {
      color: cadetblue;
      &:hover {
        color: #666;
      }
    }
  }
</style>
